<template>
  <el-menu
    width="200px"
    background-color="#333744"
    text-color="#fff"
    active-text-color="#333744"
    router
    :default-active="activeIndex"
  >
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>导航栏</span>
      </template>
      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.navItem">{{item.name}}</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      // navItem放要跳转的路径
      navList: [
        {
          name: "课程信息管理",
          navItem: "/student/courseMangement/courseInfo"
        },
        {
          name: "课程资源管理",
          navItem: "/student/courseMangement/courseResource"
        },
        {
          name: "课程作业管理",
          navItem: "/student/courseMangement/courseHomework"
        }
      ],
      activeIndex: ""
    };
  },
  // 检测路由变化
  watch: {
    $route() {
      this.setCurrentRoute();
    }
  },
  methods: {
    setCurrentRoute() {
      if (this.$route.path == "/student/courseMangement/courseInfo") {
        this.activeIndex = this.$route.path;
      } else if (
        this.$route.path == "/student/courseMangement/courseResource"
      ) {
        this.activeIndex = this.$route.path;
      } else if (
        this.$route.path == "/student/courseMangement/courseHomework"
      ) {
        this.activeIndex = this.$route.path;
      } else if (this.$route.path == "/student/courseHomework/viewCorrection") {
        this.activeIndex = "/student/courseMangement/courseHomework";
      }
    }
  },

  created() {
    this.setCurrentRoute();
  }
};
</script>

<style lang="less" scoped>
.el-menu {
  color: white;
}

.el-menu-item {
  background-color: #f2f6fc !important;
  color: black !important;
  border-bottom: 1px solid #333744;
  min-width: 180px;
}

.el-menu-item.is-active {
  color: #409bff !important;
}
</style>